<template>
	<view class="index_base">
		<image :src="props.baseinfo?.baseImage" class="index_base_image"></image>
		<view class="index_base_header">
			<view class="index_base_header_title">{{props.baseinfo?.baseName}}</view>
			<view class="index_base_header_subtitle">基地类型：{{props.baseinfo?.baseTypesName}}</view>
			<view class="index_base_header_btm">{{props.baseinfo?.num}}个活动</view>
		</view>
		<view class="index_base_address" @click.stop="handleAddress">
			<view class="index_base_address_left">
				<image src="http://qianxueapplet.suoeryun.com/location2.png"></image>
				<view>{{props.baseinfo?.baseAddress}}</view>
			</view>
			<image src="http://qianxueapplet.suoeryun.com/phone1.png" class="index_base_address_right"
				@click.stop="handleCell">
			</image>
		</view>
		<view class="index_base_bottom">
			<u-tabs :list="tabListBase" lineColor="#FF943C" :activeStyle="{
							color: '#FF943C',fontSize:'16px',fontWeigt:550
						}" :inactiveStyle="{
							color: '#000000',fontSize:'14px'}" :scrollable="false" @click="handleBaseClick" :current="tabCurrent"></u-tabs>
			<!-- 简介 -->
			<template v-if="tabCurrent === 0">
				<view class="index_base_bottom_info">{{props.baseinfo?.baseIntroduction}}</view>
			</template>
			<!-- 活动 -->
			<template v-else-if="tabCurrent === 1">
				<view class="index_base_bottom_activity">
					<template v-if="activityList?.length > 0">
						<activityCards v-for="item in activityList" :key="item?.id" :item="item"
							@handleEmit="handleEmitBase"></activityCards>
					</template>
					<u-empty v-else marginTop="50" text="暂无相关活动"
						icon="http://qianxueapplet.suoeryun.com/hd.png"></u-empty>
				</view>
			</template>
			<!--  研习指南-->
			<template v-else-if="tabCurrent === 2">
				<rich-text :nodes="handleFormat(props.baseinfo?.homeBaseGuide)"
					class="index_base_bottom_guide"></rich-text>
			</template>
		</view>
	</view>
	<!-- 评论 -->
	<comment ref="commentRef" @close="handleCommentClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>

</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		unref,
	} from "vue";
	import { qxActivityManageList } from "@/config/index.api";
	import activityCards from '@/components/activityCards.vue';
	import { handleFormat } from '@/util/index';
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";

	const props = defineProps({
		baseinfo: {
			type: Object,
			default: () => ({}),
		},
	});
	const commentRef = ref();
	const shareRef = ref();
	const activityIndex = ref(0);

	// 研习基地
	const activityList = ref([]);
	const tabListBase = [{
		id: 0,
		name: '简介'
	}, {
		id: 1,
		name: '活动'
	}, {
		id: 2,
		name: '研习指南'
	}];
	// 基地选中索引
	const tabCurrent = ref(0);
	// 活动分页计数
	const activityPagination = reactive({
		pageNo: 1,
		total: 0,
		pageSize: 10
	});

	/**
	 * 基地tab 点击
	 */
	function handleBaseClick(item) {
		console.log(item, 'handleBaseClick');
		tabCurrent.value = item?.index;
		if (item?.index === 1) {
			// 活动
			activityPagination.pageNo = 1;
			loadActivityData();
		}
	}

	/**
	 * 活动列表接口
	 */
	async function loadActivityData() {
		if (activityPagination.pageNo === 1) {
			activityList.value = [];
		}
		const res = await qxActivityManageList({
			homebaseId: props.baseinfo?.id,
			...activityPagination
		});
		activityList.value
		activityPagination.total = res?.total;
		activityList.value?.push(...res?.records);
	}

	/**
	 * 点赞/评论/转发 回调-研学基地
	 */
	function handleEmitBase(item, key) {
		const index = unref(activityList)?.findIndex(value => value?.id == item?.id);
		activityIndex.value = index;
		if (key === 'comment') {//type 1 活动 2图集 3视频
			commentRef.value.handleShow({ activityId: item?.id, num: item?.comment ?? 0, belongId: item?.id, type: '1' });
		} else if (key === 'likes') {
			activityList.value[index]['izLike'] = item?.izLike;
			activityList.value[index]['likes'] = item?.likes;
		} else if (key === 'relay') {
			shareRef.value.handleShow({ path: 'pages/index/acitvityDetails', scene: `id=${item?.id}`, activityId: item?.id, title: item?.activityName });
		} else {
			activityList.value[index] = item;
		}
	}

	/**
	 * 评论回调
	 */
	function handleCommentClose(num) {
		activityList.value[unref(activityIndex)]['comment'] = num;
	}

	/**
	 * 地址
	 */
	function handleAddress() {
		// 打开地图选择位置。
		uni.openLocation({
			latitude: Number(props.baseinfo?.baseAddressLat),//目标地纬度
			longitude: Number(props.baseinfo?.baseAddressLng),//目标地纬度
			name: props.baseinfo?.baseAddress,
			success: (res) => {
				console.log(res, 'res');
			},
			fail: (err) => {
				console.log(err, 'err');
			}
		})
	}

	/**
	 * 打电话
	 */
	function handleCell() {
		console.log(234, props.baseinfo);
		// 拨打电话。
		uni.makePhoneCall({
			phoneNumber: props.baseinfo?.phone //仅为示例
		});
	}
</script>

<style lang="scss" scoped>
	// 研习基地
	.index_base {
		position: absolute;
		width: 100%;
		top: 160rpx;

		.index_base_image {
			height: 364rpx;
			width: 100%;
		}

		.index_base_header {
			background-color: #ffffff;
			padding: 26rpx;
			margin-bottom: 24rpx;
			margin-top: -6rpx;

			.index_base_header_title {
				font-size: 40rpx;
				font-weight: bold;
			}

			.index_base_header_subtitle {
				font-size: 28rpx;
				font-weight: bold;
				margin: 20rpx 0;
			}

			.index_base_header_btm {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.index_base_address {
			background-color: #ffffff;
			padding: 34rpx 28rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.index_base_address_left {
				display: flex;
				font-weight: bold;
				font-size: 32rpx;
				// align-items: baseline;
				flex: 1;

				image {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
					margin-top: 2px;
				}

				view {
					flex: 0.9;
					color: #00B386;
				}
			}

			.index_base_address_right {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.index_base_bottom {
			background-color: #ffffff;
			margin-bottom: 48rpx;

			.index_base_bottom_info {
				text-indent: 40px;
				margin: 24rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				padding-bottom: 24rpx;
			}

			.index_base_bottom_activity {
				background-color: #F2F2F2;
				padding-top: 20rpx;
			}

			.index_base_bottom_guide {
				padding: 24rpx;
				display: block;

				img {
					width: 100% !important;
				}
			}
		}
	}
</style>